import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { observer} from 'mobx-react';
import { MapPage } from "weaver-mobile-page";

@withRouter
@observer
export default class MapView extends Component {
    componentDidMount(){
        this.props.store.draw = this.draw;
    }

    amapEvents = {
        created: instance => {
            const {store: {mapUtil}} = this.props;
            mapUtil.mapInstance = instance;
            this.draw();
        }
    };

    initEndCallback = () => {
        const {store: {mapUtil}} = this.props;
        mapUtil.mapInited = true;
        this.draw();
    }

    draw = () => {
        const {store} = this.props;
        const {hasLocationInfo, locationInfo, mapUtil} = store;
        const {clearMapData, addMarker, setCenter} = mapUtil;
        //清理地图数据
        clearMapData();
        //添加marker
        hasLocationInfo && addMarker(locationInfo) && setCenter(locationInfo);
    }

    render(){
        const {store} = this.props;
        const {mapUtil, onMapTypeChangeHandle: callback} = store;
        const {mapStore, isAmap, isGoogleMap, onMapTypeChangeHandle} = mapUtil;
        const mapProps = {store: mapStore, showIntroduction: false, onMapSwitch: type => onMapTypeChangeHandle(type, callback)};
        if(isAmap){
            Object.assign(mapProps, {
                plugins: [],
                events: this.amapEvents,
                dragEnable: false,
                children: (
                    <div />
                )
            })
        }else if(isGoogleMap){
            Object.assign(mapProps, {
                initEndCallback: this.initEndCallback,
                center: [0, 0],
                needInitMarker: false,
                intiGoogleMapParams: {
                    draggable: false,
                    fullscreenControl: false
                }
            })
        }
        
        return (
            <div className='mapView'>
                <MapPage {...mapProps} />
            </div>
        )
    }
}